<script>
import { ref } from 'vue'

export default {
  name: 'system-setting',
  setup() {
    const trueOrFalse = ref(true);
    const value = ref('');

    const options = [
      {
        value: 'Option1',
        label: 'deepseek',
      },
      {
        value: 'Option2',
        label: 'Option2',
      },
      {
        value: 'Option3',
        label: 'Option3',
      },
      {
        value: 'Option4',
        label: 'Option4',
      },
      {
        value: 'Option5',
        label: 'Option5',
      },
    ];

    return {
      trueOrFalse,
      value,
      options,
    }
  }
}
</script>

<template>
  <div class="system-contianer">
    <div class="ai-reasoning">
      <h2>{{ $t('Setting.system.aiSettings') }}</h2>
      <h3>{{ $t('Setting.system.aiReasoning') }}</h3>
      <div class="row">
        <el-switch v-model="trueOrFalse" />
        <p>{{ $t('Setting.system.enableGPUAcceleration') }}</p>
      </div>
      <p class="tip">{{ $t('Setting.system.gpuAccelerationTip') }}</p>
    </div>
    <div class="ai-selection">
      <h3>{{ $t('Setting.system.aiModelSelection') }}</h3>
      <el-select
        v-model="value"
        :placeholder="$t('Setting.system.select')"
        size="large"
        style="width: 240px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          style="padding-left: 20px; font-size: 15px;"
        />
      </el-select>
      <p class="tip">{{ $t('Setting.system.modelSelectionTip') }}</p>
    </div>
  </div>
</template>

<style scoped>
@import '/src/css/base.css';
@import "/src/css/setting/system-setting.css";
</style>
